<html>
<head>
<style>
*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 auto;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
}
</style>
</head>
<body>
	<div id="container">
		<header>HEADER</header>
		<section class="main">MAIN</section>
		<footer>FOOTER</footer>
	</div>
</body>
</html>